import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:mobile_vpn/common/cpn/cpn_view_state.dart';
import '../../../common/cpn/sliver_app_bar.dart';
import '../../../theme/color_palettes.dart';
import 'message_logic.dart';

class MessageCenterPage extends CpnViewState<MessageLogic> {

  MessageCenterPage({Key? key}) : super(key: key, bindViewState: false);
  final List<MessageItem> messages = [
    MessageItem(
      icon: Icons.info_outline,
      title: '系统通知11111111111111111111111111111',
      content:
          '您的账号安全验证已通过11111111111111111111111111111111111111111111111111111111',
      time: '10:30',
    ),
    MessageItem(
      icon: Icons.warning_amber_rounded,
      title: '安全警告',
      content: '检测到异常登录尝试',
      time: '09:45',
    ),
    MessageItem(
      icon: Icons.warning_amber_rounded,
      title: '新邮件',
      content: '来自support@example.com',
      time: '08:15',
    ),
  ];

  @override
  Widget buildBody(BuildContext context) {
    return CustomScrollView(
      slivers: [
        // 调用公共AppBar组件
        commonSliverAppBar(
          title: '消息中心',
        ),

        // 消息列表
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              final message = messages[index];
              return Container(
                constraints: BoxConstraints(
                  minHeight: 180.h, // 根据屏幕适配的最小高度
                ),
                margin: EdgeInsets.only(
                  top: 30.h, // 仅设置上间距
                  left: 20.w, // 保留原有水平间距
                  right: 20.w,
                ),
                // 调整垂直间距为8.h
                padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 24.h),

                // 明确指定上下/左右内边距
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.horizontal(
                    // 仅水平方向设置圆角
                    right: Radius.circular(12.w), // 仅右侧圆角
                  ),
                  color: Color(0xFFFFFFFF),
                    boxShadow: [
                      BoxShadow( // 底层扩散阴影
                        color: Color(0xFF2887E6).withOpacity(0.1),
                        blurRadius: 32.w,
                        spreadRadius: -8.w,
                      ),
                      BoxShadow( // 表层锐利阴影
                        color: Colors.black.withOpacity(0.12),
                        blurRadius: 8.w,
                        offset: Offset(0, 4.w),
                      )
                    ],
                  border: Border(
                    left: BorderSide(
                      color: Color(0xFF2887E6), // 蓝色装饰线
                      width: 10.w, // 线条宽度
                    ),
                  ),
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start, // 关键属性
                  children: [
                    Icon(
                      message.icon,
                      color: Color(0xFF2887E6),
                      size: 48.w,
                    ),
                    SizedBox(width: 20.w),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            message.title,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                                fontSize: 32.w,
                                fontWeight: FontWeight.bold,
                                color: ColorPalettes.instance.firstText),
                          ),
                          SizedBox(height: 8.w),
                          Text(
                            message.content,
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                                fontSize: 28.w,
                                color: ColorPalettes.instance.secondText),
                          ),
                          // 时间显示建议保持原样（若不需截断）
                          Text(
                            message.time,
                            style: TextStyle(
                                fontSize: 24.w,
                                color: ColorPalettes.instance.thirdText),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              );
            },
            childCount: messages.length,
          ),
        )
      ],
    );
  }
}

class MessageItem {
  final IconData icon;
  final String title;
  final String content;
  final String time;

  MessageItem({
    required this.icon,
    required this.title,
    required this.content,
    required this.time,
  });
}
